<template>
  <div>
    <n-form inline>
      <n-form-item label="条件1" path="user.name">
        <n-input v-model:value="editForm.one" placeholder="条件1" />
      </n-form-item>
      <n-form-item label="条件2" path="user.name">
        <n-select
          v-model:value="editForm.two"
          filterable
          label-field="name"
          value-field="id"
          placeholder="条件2"
          :options="options"
        />
      </n-form-item>
      <n-form-item>
        <n-button attr-type="button" @click="edit"> 编辑 </n-button>
      </n-form-item>
    </n-form>
  </div>
</template>
<script lang="ts" setup>
  import { ref, unref, reactive, onMounted, computed } from 'vue';
  import { getUsers, getUserDetail } from '@/api/Demo/Demo';

  const emits = defineEmits(['send']);

  const props = defineProps({
    pageParam: {
      type: Object,
      required: true,
    },
  });

  const options = ref([]);
  // 加载下拉框数据
  const load = async () => {
    const res = await getUsers({});
    options.value = res.data;
  };

  const editForm = reactive({
    id: null,
    one: null,
    two: null,
  });

  // 获取编辑信息
  const getDetail = async (id) => {
    const res = await getUserDetail({ id });
    const dataDetail = res.data;
    editForm.id = dataDetail.id;
    editForm.one = dataDetail.one;
    editForm.two = dataDetail.two;
    console.log(res);
  };

  const edit = async () => {
    // http 请求提交数据 ...

    // 发送消息
    emits('send', 'closeEditForm');
    emits('send', 'refreshTable');
  };

  // 初始化数据
  function init(params) {
    load();
    // params为表格项对象item，根据id获取编辑详情信息
    getDetail(params.id);
  }

  defineExpose({
    init,
  });
</script>
